<template>
	<view class="page_content" style="background: linear-gradient( 180deg, #E5FFF7 0%, #FAFAFA 100%);">
		<view class="flex_start">
			<u-avatar size="100" :src="userInfo.avatar ?  userInfo.avatar : 'https://cdn.uviewui.com/uview/album/1.jpg' "></u-avatar>
			
			<view class="pl_32">
				<view class="text_40">您好</view>
				<view class="text_40 mt_16">{{userInfo.nickName || 'hjy'+ (userInfo.phonenumber || '')}}</view>
				<view class="my_tel">
					<image style="width: 48rpx;height: 48rpx;margin-right: 8rpx;" src="@/static/images/my_tel.png"
						mode="widthFix"></image> {{userInfo.phonenumber || ''}}
				</view>
			</view>
			<!-- <view class="flex_1 flex_center_end">
				<u-icon slot="right" name="arrow-right"></u-icon>
			</view> -->
		</view>
		<view class="mt_96 flex_between_wrap">
				<view class="flex_ridus">
					<image class="flex_img" src="@/static/images/my1.png"></image>
					<view class="mt_16 c_000">建模进行</view>
					<view class="mt_16 text_color">{{ticketNum}}</view>
				</view>
				<view class="flex_ridus">
					<image class="flex_img" src="@/static/images/my2.png"></image>
					<view class="mt_16 c_000">创作券</view>
					<view class="mt_16 text_color">{{createNum}}</view>
				</view>
				<view class="flex_ridus">
					<image class="flex_img" src="@/static/images/my4.png"></image>
					<view class="mt_16 c_000">活动中心</view>
					<view class="mt_16 text_color">0</view>
				</view>
		</view>
		<!-- <u-image src="https://cdn.uviewui.com/uview/album/8.jpg" width="100%" height="160" radius="8"
			mode="widthFix"></u-image> -->
		<view class="flex_cell_ridus mt_24">
			<view class="flex_between_wrap pd48" @click="navigatorPath('/pages/modelList?type=1')">
				<view class="flex_start">
					<image style="width: 56rpx;height: 56rpx;" src="@/static/images/my3.png"></image>
					<text style="padding-left:40rpx;">我的3D相册</text>
				</view>
				<view class="flex_center_end c_999">
					<text style="padding-right:28rpx;">0</text>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>
			<view class="flex_between_wrap pd48" @click="navigatorPath('/pages/modelList?type=1')">
				<view class="flex_start">
					<image style="width: 56rpx;height: 56rpx;" src="@/static/images/my5.png"></image>
					<text style="padding-left:40rpx;">我的3D资产</text>
				</view>
				<view class="flex_center_end c_999">
					<text style="padding-right:28rpx;">{{propertyNum}}</text>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>
			<view class="flex_between_wrap pd48" @click="navigatorPath('/pages/modelList?type=2')">
				<view class="flex_start">
					<image style="width: 56rpx;height: 56rpx;" src="@/static/images/my6.png"></image>
					<text style="padding-left:40rpx;">我的收藏</text>
				</view>
				<view class="flex_center_end c_999">
					<text style="padding-right:28rpx;">{{collectNum}}</text>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>
			<!-- <u-cell  title="我的3D相册" isLink @click="navigatorPath('/pages/modelList?type=1')">
				<image slot="icon" class="flex_img" src="../static/images/my3.png"></image>
			</u-cell>
			<u-cell  title="我的3D资产" :value="propertyNum" isLink @click="navigatorPath('/pages/modelList?type=1')">
				<image class="flex_img" src="@/static/images/my3.png"></image>
			</u-cell>
			<u-cell  title="我的收藏" :value="collectNum" :border="false" isLink @click="navigatorPath('/pages/modelList?type=2')">
				<u-icon slot="icon" color="#F16079" size="32" name="heart-fill"></u-icon>
			</u-cell> -->
		</view>
		<u-popup :show="showAgree" mode="center" :round="10">
			<view class="pop_content">
				<view class="pop_title">隐私政策协议</view>
				<view>感谢您使用恒纪元实验室小程序！<br>
					为了保障您的个人信息安全，请您仔细阅读并理解我们的<text class="c_01B"
						@click="handlePath('/pages/agreement')">《隐私政策》</text>。这些条款将详细说明我们如何处理和保护您的个人信息。<br>
					如您同意，请点击”同意”开始使用我们的产品与服务。
				</view>
				<view class="flex_between mt_64">
					<button class="btn flex_center agree" v-if="userBtn" @click="getUserProfile">同意</button>
					<button class="btn flex_center agree" v-else open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">获取手机号码</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { modelList,getTicketNum,selectFavoriteModelList,buildingNum,updateProfileWx } from '@/api/common.js'
import config from '@/config'
import { getToken } from '@/utils/auth'
export default {
	data() {
		return {
			form: {
				avatar: '',
				nickName: ''
			},
			rules: {
				avatar: {
					type: 'string',
					required: true,
					message: '请获取用户头像',
					trigger: ['blur', 'change']
				},
				nickName: {
					type: 'string',
					required: true,
					message: '请获取用户昵称',
					trigger: ['blur', 'change']
				}
			},
			baseUrl: config.baseUrl,
			showAgree:false ,
			ticketNum: 0,
			propertyNum: 0,
			collectNum: 0,
			createNum: 0,
			userInfo: {}
		}
	},
	// 监听token变化
	watch: {
		'$store.state.user.token'(newValue, oldValue) {
			this.showAgree = false
			this.getAllApi()
		}
	},
	onShow() {
		if (getToken()) {
			// 收藏
			selectFavoriteModelList().then(res => {
				this.collectNum = res.rows.length
			})
			this.getAllApi()
		}
	},
	onLoad() {
		// 根据token判断是否登录
		if (getToken()) {
			this.showAgree = false
			this.getAllApi()
		} else {
			this.showAgree = true
			wx.getPrivacySetting({
			      success: res => {
			        console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
			        if (res.needAuthorization) {
			          // 需要弹出隐私协议
			         //  this.showAgree = true
			        } else {
			          // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
			          // wx.getUserProfile()
			          // wx.chooseMedia()
			          // wx.getClipboardData()
			          // wx.startRecord()
			        }
			      },
			      fail: () => {},
			      complete: () => {}
			})
		}
	},
	methods: {
		getPhoneNumber(res) { // 获取手机号
			this.$store.dispatch('Login', {
				code: res.detail.code
			})
		},
		getAllApi() {
			this.userInfo  = uni.getStorageSync("userInfo")
			if(!this.userInfo.avatar || !this.userInfo.nickName) {
				this.showAgree = true
			}
			if(this.userInfo.avatar) {
				this.form.avatar = this.userInfo.avatar
			}
			if(this.userInfo.nickName) {
				this.form.nickName = this.userInfo.nickName
			}
			// 3D资产总数
			modelList({displayType:2,pageNum:1,pageSize:10}).then(res => {
				this.propertyNum = res.total
			})
			// 创作券
			getTicketNum().then(res => {
				this.createNum = res.data
			})
			// 建模进行
			buildingNum().then(res => {
				this.ticketNum = res.data.num
			})
		},
		onSubmit() {
			this.$refs.uForm.validate().then(res => {
				let userInfo = uni.getStorageSync('userInfo')
				userInfo.avatar = this.form.avatar
				userInfo.nickName = this.form.nickName
				uni.setStorageSync("userInfo", userInfo)
				let that = this
				updateProfileWx(this.form).then(res => {
					if (res.code == 200) {
						that.userInfo  = uni.getStorageSync("userInfo")
						that.showAgree = false
					}
				})
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		bindblur(e) {
			this.form.nickName = e.detail.value; // 获取微信昵称
		},
		bindinput(e) {
			this.form.nickName = e.detail.value; // 获取微信昵称
		},
		onChooseAvatar(e) {
			uni.showToast({
				title: '成功',
				duration: 1000
			})
			let a = uni.uploadFile({
				url: config.baseUrl+'/model/build-model/uploadLogo',
				filePath: e.detail.avatarUrl,
				name: 'file',
				header: {
					Authorization: getToken()
				},
				success: (res) => {
					this.form.avatar = config.baseImg + JSON.parse(res.data).data.logo
				}
			})
		},
		navigatorPath(url){
			uni.navigateTo({
				url: url
			});
		}
	}
}
</script>
<style scoped lang="scss">
.pd48 {
	padding: 24rpx 48rpx;
}
.my_tel {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #999999;
	margin-top: 20rpx;
}
.video_border {
	width: 694rpx;
	height: 150px;
}
.flex_cell_ridus {
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 20rpx -6rpx rgba(242, 242, 242, 0.5);
	border-radius: 16rpx;
	width: 100%;
}

/deep/ .u-popup__content {
	background-color: #fff;
	padding: 40rpx 0 0;
	width: calc(100% - 72rpx);
	margin: 0 auto;
	border-radius: 16rpx;

	.pop_content {
		padding: 0 48rpx 48rpx;
	}

	.pop_title {
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
		padding-bottom: 40rpx;
	}

	.btn {
		width: 100%;
		height: 72rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		background: $uv-main-color;
		color: #FFFFFF;
	}
}
button {
		font-size: 28rpx;
		line-height: 30rpx;
		padding: 0;
		margin: 0;
		text-align: left;
		background-color: #ffffff;
		border: none;
	}
	button::after {
	    border: 1px solid #ffffff;
	}
.text_color{
	font-family: DingTalk JinBuTi, DingTalk JinBuTi;
	font-weight: 400;
	font-size: 48rpx;
	color: #00FFAA;
	line-height: 56rpx;
	text-stroke: 1px #000000;
	font-style: normal;
	text-transform: none;
	-webkit-text-stroke: 1px #000000;
}
.flex_ridus {
	background: #FFFFFF;
	border-radius: 24rpx;
	width: 30%;
	padding:64rpx 32rpx 32rpx;
	text-align: center;
	position: relative;
}
.flex_img {
	width: 120rpx;
	height: 120rpx;
	position: absolute;
	left: 20%;
	top: -60rpx;
}
</style>